<html>
<head>

</head>
<body>
<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {

        FB.init({
          appId: '628683900509984', // App ID
          //channelUrl: '//www.milujse.cz/app/channel.html', // Channel File
          status: true,
          cookie: true,
          xfbml: true
        });
/* 
        FB.Event.subscribe('auth.authResponseChange', function(response) {

          if (response.status === 'connected') {
            testAPI();
          } else if (response.status === 'not_authorized') {

          } else {

          }
        });
 */      };

      (function(d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
      }(document));

      function logoutFB()
      {
        FB.logout(function(response) {
        });
      }
    </script>
<!-- 
    <input id="login" type="button" value="Login" onclick="loginFB();
        return false;" />
    <input type="button" value="Logout" onclick="logoutFB();
        return false;" /> -->
        <img class="login" src="images/720/login.png" onClick="loginFB();">
        <img class="register" src="images/720/logout.png" onClick="registerFB();">
<div id="wrap">
  <div id="nav-bar">
    <div class="pull-left">
      <div id="header-container">
        <h5><strong>SÂN BÓNG</strong></h5>
        <div class="dropdown"> <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#"> <b>TIN T?C S? KI?N</b>  </a>
          <ul class="dropdown-menu">
            <li><a href="/football/News.html">News</a></li>
            <li><a href="/football/Footballer.html">Footballer</a></li>
            <li><a href="/football/FavouriteTeam.html">Favourite team</a></li>
            <li><a href="/football/Match.html">Match</a></li>
            <li class="divider"></li>
            <li><a href="/football/index.html">Home</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pull-right">
      <div id="top-info" class="pull-right"> <a id="settings" href="#" class="win-command pull-right"> </a> <a id="logged-user" href="#" class="win-command pull-right"> </a>
        <div class="pull-left">
          <h3>FirstName</h3>
          <h4>LastName</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="metro panorama">
    <div class="panorama-sections">
      <div class="panorama-section">
        <h2><a class="title" href="http://www.24h.com.vn/bong-da/liverpool-gianh-cu-dup-nha-thang-8-c48a571999.html">TIN N?I B?T</a></h2>
        <div class="tile-column-span-1"> <a class="tile squarepeek" href="#"> <div id="imageoutstanding0"><img src="http://sghrsvc.futureworkz.com.sg/jdoc/images/Sport-Soccer.jpg" alt="">
          <div class="textover-wrapper transparent" style="background-color: rgba(0, 0, 0, 0.5); height: 30%" >
            <div class="text5" >Owen was broken leg.</div>
          </div></div>
          </a> 
          
          <a class="tile square image" href="#" style="width:170px">
          <div id="imageoutstanding1">
          <div  class = "text4"  style="font-size: 13px"> Messi do commit suicide </div>
          <div class="textover-wrapper transparent">
            <div class="text2">Name of paper</div>
          </div></div>
          </a> <a class="tile square image" href="#" style="width:170px">
          <div id="imageoutstanding2">
          <div class = "text4"  style="font-size: 13px"> CR7 do commit suicide </div>
          <div class="textover-wrapper transparent">
            <div class="text2">Name of paper</div>
          </div></div>
          </a> </div>
        <div  class="tile-column-span-2"> 
       
        <a id="imageoutstanding3" class="tile wide imagetext wideimage" href="#" style="width:194px; height: 220px; background-color: rgba(0, 0, 0, 0.5)"> <img src="http://sghrsvc.futureworkz.com.sg/jdoc/images/Bankoboev.Ru_futbolnyi_udar_po_myachu.jpg" alt="" style="width:170px; height: 150px;  padding-left: 12px; padding-top:12px">
          <div  class = "text4"> Liverpool return </div>
          <div class="textover-wrapper" >
            <div class="text2">Name of paper</div>
          </div>
          </a> <a id="imageoutstanding4" class="tile square image" href="#" style="width:194px">
          <div class = "text4" style="font-size: 14px"> VietNam 3 - 0 England </div>
          <div class="textover-wrapper transparent" >
            <div class="text2">Name of paper</div>
          </div>
          </a> </div>
      </div>
      <div class="panorama-section">
        <div class="tile-column-span-3">
          <h2><a class="title" href="/football/Schedule.php">K?T QU? TR?N Ð?U 3 NGÀY TRU?C</a></h2>
          <div id="posts1"></div>
         
        </div>
        <div class="tile-column-span-3">
          <h2><a class="title" href="/football/Schedule.php">L?CH THI Ð?U TRONG 3 NGÀY T?I</a></h2>
          <div id="posts2"></div>
        </div>
      </div>
      <div class="panorama-section">
        <div class="tile-column-span-3">
          <h2><a class="title" href="/football/Schedule.php">DANH SÁCH THÀNH VIÊN D? ÐOÁN</a></h2>
           <div id="posts3"></div>
        </div>
      </div>
    </div>
  </div>
  <a style="display: block;" id="panorama-scroll-prev" href="#"></a> <a id="panorama-scroll-next" href="#"></a>
  <div id="panorama-scroll-prev-bkg" onMouseOver="jshowMenu(this)" onMouseOut="jhideMenu(this)">
    <div class="jmenuWrap">
      <div class="jmenu">
        <h2>V? TRANG</h2>
        <div class="jmenu-content"><img id="return" src="http://sghrsvc.futureworkz.com.sg/jdoc/images/back2top.jpg" onClick="showMessage('msg');"> <img id="predictlayout" src="http://sghrsvc.futureworkz.com.sg/jdoc/images/back2expected.jpg" onClick="showPredict();"> </div>
      </div>
    </div>
  </div>
  <div id="panorama-scroll-next-bkg"></div>
</div>
<div id="charms" class="win-ui-dark slide">
  <div id="theme-charms-section" class="charms-section">
    <div class="charms-header"> <a href="#" class="close-charms win-backbutton"></a>
      <h2>Log in</h2>
    </div>
    <div class="row-fluid">
      <div class="span12">
        <form class="">
          <label for="win-theme-select">Please give me your infomation</label>
          <select id="win-theme-select" class="">
            <option value="metro-ui-light">Light</option>
            <option selected="selected" value="metro-ui-dark">Dark</option>
          </select>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    jQuery('.panorama').panorama({
       //nicescroll: false,
       showscrollbuttons: true,
       keyboard: true,
       parallax: true
    });
    jQuery('#pivot').pivot();
</script>
</body>
</html>
